<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>步骤表单</title>
    <!-- 依 赖 样 式 -->
    <link rel="stylesheet" href="../module/pear/css/pear.css"/>
</head>
<body class="pear-container">
<form class="layui-form" id="stepForm">
    <div class="layui-form-item">
        <label class="layui-form-label">操作类型</label>
        <div class="layui-input-block">
            <select name="type" lay-filter="stepType" lay-search>
                <option value="">请选择</option>
                <option value="ELEMENT">选择元素</option>
                <option value="CLEAN_ELEMENT">清除已选择元素</option>
                <option value="EACH">元素组循环</option>
                <option value="CLICK">点击</option>
                <option value="INPUT">输入</option>
                <option value="OUTPUT">输出</option>
                <option value="SAVE_PHOTO">保存图片</option>
                <option value="TO">转到</option>
                <option value="REFRESH">刷新页面</option>
                <option value="JAVASCRIPT">执行JS</option>
                <option value="SUBMIT">form表单提交</option>
                <option value="WAIT">设置钩子</option>
                <option value="SLEEP">休息</option>
            </select>
        </div>
    </div>
    <div id="items">
        <div class="layui-form-item" id="useCurrentEle" hidden>
            <label class="layui-form-label">使用选择元素</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="useCurrentEle" name="useCurrentEle" value="true" title="是" checked>
                <input type="radio" lay-filter="useCurrentEle" name="useCurrentEle" value="false" title="否">
            </div>
        </div>
        <div class="layui-form-item" id="currentEle">
            <label class="layui-form-label">选择器类型</label>
            <div class="layui-input-block">
                <select lay-filter="eleType">
                    <option value="">请选择</option>
                    <option value="id">id</option>
                    <option value="class">class</option>
                    <option value="name">name</option>
                    <option value="tag">tag</option>
                    <option value="xpath">xpath</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item ele" id="Id" hidden>
            <label class="layui-form-label">元素id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required placeholder="请输入元素id" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ele" id="className" hidden>
            <label class="layui-form-label">元素class</label>
            <div class="layui-input-block">
                <input type="text" name="className" required placeholder="请输入元素组class"
                       autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ele" id="name" hidden>
            <label class="layui-form-label">元素name</label>
            <div class="layui-input-block">
                <input type="text" name="name" required placeholder="请输入元素组name"
                       autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ele" id="tag" hidden>
            <label class="layui-form-label">元素tag</label>
            <div class="layui-input-block">
                <input type="text" name="tag" required placeholder="请输入元素组tag" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ele" id="xpath" hidden>
            <label class="layui-form-label">xpath</label>
            <div class="layui-input-block">
                <input type="text" name="xpath" required placeholder="请输入元素的xpath" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ele" id="index" hidden>
            <label class="layui-form-label">元素组index</label>
            <div class="layui-input-block">
                <input type="number" name="index" min="0" oninput="this.value=this.value.replace(/\D/g);" required
                       placeholder="请输入元素组index"
                       autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" id="sleep" hidden>
            <label class="layui-form-label">休息时间</label>
            <div class="layui-input-block">
                <input type="number" name="sleep" min="1" oninput="this.value=this.value.replace(/\D/g);" required
                       placeholder="请输入休息时间ms"
                       autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" id="value" hidden>
            <label class="layui-form-label">规定值</label>
            <div class="layui-input-block">
                <textarea name="value" placeholder="请输入值（当选择保存图片时，作为保存路径）" class="layui-textarea" rows="4"
                          style="resize: none;width:600px "></textarea>
            </div>
        </div>
        <div class="layui-form-item" id="getBy" hidden>
            <label class="layui-form-label">取值方式</label>
            <div class="layui-input-block">
                <select name="getBy" lay-filter="getBy">
                    <option value="">请选择</option>
                    <option value="TEXT">TEXT</option>
                    <option value="ATTRIBUTE">ATTRIBUTE属性</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="fieName" hidden>
            <label class="layui-form-label">字段名</label>
            <div class="layui-input-block">
                <input type="text" name="fieName" required placeholder="请输入字段名(当选择保存图片时，作为图片文件名称；输入时可填写取出的字段名)"
                       autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
    </div>
</form>
</body>
<!-- 依 赖 脚 本 -->
<script src="../module/layui/layui.js"></script>
<script src="../module/pear/pear.js"></script>
<script>
    var index = -1

    function init(d, i) {
        if (i >= 0)
            index = i
        layui.use(['layer', 'jquery', 'form', 'tool'], function () {
            let $ = layui.jquery
            let tool = layui.tool
            let form = layui.form

            let selectVar = ''

            form.on('select(stepType)', function (data) {
                selectVar = data.value
                $('#items').find(".layui-form-item").hide()
                $('[name=getBy]').find("option:selected").attr("selected", false);
                $('[lay-filter=eleType]').find("option:selected").attr("selected", false);
                $('input[type=text]').val('')
                $('textarea').val('')
                $('[name=useCurrentEle]').each(function (i, t) {
                    if ($(t).val() === 'true')
                        $(t).attr('checked', '')
                    else
                        $(t).removeAttr('checked')
                })
                $('[lay-filter=eleType]').find('[value=name]').removeAttr('disabled')
                $('[lay-filter=eleType]').find('[value=tag]').removeAttr('disabled')
                switch (selectVar) {
                    case "WAIT":
                        $('[lay-filter=eleType]').find('[value=name]').attr('disabled', '')
                        $('[lay-filter=eleType]').find('[value=tag]').attr('disabled', '')
                        break
                    case "SLEEP":
                        $('#sleep').show()
                        break;
                    case "SAVE_PHOTO":
                    case "INPUT":
                        $('#value').show()
                        $('#fieName').show()
                        break
                    case "OUTPUT":
                        $('#getBy').show()
                        $('#fieName').show()
                        break
                    case "TO":
                    case "JAVASCRIPT":
                        $('#value').show()
                        break
                }
                if (tool.isBlank(data.value) || data.value === 'SLEEP' || data.value === 'TO' || data.value === 'CLEAN_ELEMENT' || data.value === 'REFRESH' || data.value === 'JAVASCRIPT') {
                    $('#useCurrentEle').hide()
                    $('#currentEle').hide()
                } else {
                    $('#useCurrentEle').show()
                    $('#currentEle').show()
                }
                form.render('select');
            });

            // form.on('radio(useCurrentEle)', function (data) {
            //     if (selectVar === 'WAIT' || selectVar === 'CLICK' || selectVar === 'INPUT' || selectVar === 'OUTPUT' || selectVar === 'SAVE_PHOTO' || selectVar === 'SUBMIT')
            //         if (data.value === 'false')
            //             $('#currentEle').show()
            //         else {
            //             $('#currentEle').hide()
            //             $('.ele').hide()
            //         }
            // });

            form.on('select(eleType)', function (data) {
                $('.ele').hide()
                $('#index').show()
                $('[name=id]').val('')
                $('[name=className]').val('')
                $('[name=name]').val('')
                $('[name=tag]').val('')
                $('[name=xpath]').val('')
                switch (data.value) {
                    case "id":
                        $('#Id').show()
                        $('#index').hide()
                        break;
                    case "class":
                        $('#className').show()
                        break;
                    case "name":
                        $('#name').show()
                        break;
                    case "tag":
                        $('#tag').show()
                        break;
                    case "xpath":
                        $('#xpath').show()
                        $('#index').hide()
                        break;
                }
            });

            form.on('select(getBy)', function (data) {
                $('#value').hide()
                switch (data.value) {
                    case "ATTRIBUTE":
                        $('#value').show()
                        break;
                }
            });

            //反显
            console.log(JSON.stringify(d))
            if (d != null) {
                //操作类型
                $('[name=type]').parent().find('[lay-value=' + d.type + ']').click()
                //radio
                $('[name=useCurrentEle]').each(function (i, t) {
                    if ($(t).val() === "true" && d.useCurrentEle)
                        $(t).attr('checked', 'checked')
                    else if ($(t).val() === "false" && !d.useCurrentEle)
                        $(t).attr('checked', 'checked')
                    else
                        $(t).removeAttr('checked')
                })
                //选择器类型
                let eleType = $('[lay-filter=eleType]').parent()
                if (tool.isNotBlank(d.id)) {
                    eleType.find('[lay-value=id]').click()
                } else if (tool.isNotBlank(d.className)) {
                    eleType.find('[lay-value=class]').click()
                } else if (tool.isNotBlank(d.name)) {
                    eleType.find('[lay-value=name]').click()
                } else if (tool.isNotBlank(d.tag)) {
                    eleType.find('[lay-value=tag]').click()
                } else if (tool.isNotBlank(d.xpath)) {
                    eleType.find('[lay-value=xpath]').click()
                }
                //取值方式
                if (tool.isNotBlank(d.getBy))
                    $('[name=getBy]').parent().find('[lay-value=' + d.getBy + ']').click()
                setTimeout(() => {
                    tool.JsonToHtmlValByName(d, $('#stepForm'))
                }, 200)
                form.render();
            }

        })
    }


    function saveStep() {
        let $ = layui.jquery
        let tool = layui.tool
        let data = tool.serializeObject($('#stepForm'))
        if (tool.isBlank(data.type)) {
            tool.toast.warning('步骤验证错误', '请选择操作类型', 'topCenter')
            return false
        }
        switch (data.type) {
            case "WAIT":
            case "ELEMENT":
                if (!chickFalse(data))
                    return false
                break
            case "CLICK":
            case "SUBMIT":
                if (data.useCurrentEle === 'false' && !chickFalse(data))
                    return false
                break
            case "INPUT":
                if (tool.isBlank(data.value) && tool.isBlank(data.fieName)) {
                    tool.toast.warning('步骤验证错误', '请选填一种作为传入值', 'topCenter')
                    return false
                }
                if (data.useCurrentEle === 'false' && !chickFalse(data))
                    return false
                break
            case "OUTPUT":
                if (tool.isBlank(data.getBy)) {
                    tool.toast.warning('步骤验证错误', '请选选择取值方式', 'topCenter')
                    return false
                } else {
                    if (data.getBy === 'ATTRIBUTE' && tool.isBlank(data.value)) {
                        tool.toast.warning('步骤验证错误', '请填写ATTRIBUTE属性，例如要取input的value 就填写value', 'topCenter')
                        return false
                    }
                }
                if (tool.isBlank(data.fieName)) {
                    tool.toast.warning('步骤验证错误', '请填写取值的字段名称', 'topCenter')
                    return false
                }
                if (data.useCurrentEle === 'false' && !chickFalse(data))
                    return false
                break
            case "SAVE_PHOTO":
                if (tool.isBlank(data.value)) {
                    tool.toast.warning('步骤验证错误', '请填写图片保存路径', 'topCenter')
                    return false
                }
                if (tool.isBlank(data.fieName)) {
                    tool.toast.warning('步骤验证错误', '请填写图片保存文件名', 'topCenter')
                    return false
                }
                if (data.useCurrentEle === 'false' && !chickFalse(data))
                    return false
                break
            case "TO":
                if (tool.isBlank(data.value)) {
                    tool.toast.warning('步骤验证错误', '请填写跳转的网页路径http:// || https://', 'topCenter')
                    return false
                } else if (data.value.indexOf('http://') !== 0 && data.value.indexOf('https://') !== 0) {
                    tool.toast.warning('步骤验证错误', '网页路径不正确！ http:// || https://', 'topCenter')
                    return false
                }
                break
            case "JAVASCRIPT":
                if (tool.isBlank(data.value)) {
                    tool.toast.warning('步骤验证错误', '请填写需要执行的JS代码', 'topCenter')
                    return false
                }
                break
            case "SLEEP":
                if (tool.isBlank(data.sleep)) {
                    tool.toast.warning('步骤验证错误', '请填写需要暂停时长 /ms', 'topCenter')
                    return false
                }
                break
        }
        return data
    }

    function chickFalse(data) {
        let tool = layui.tool
        if (tool.isBlank(data.id) && tool.isBlank(data.className) && tool.isBlank(data.name) && tool.isBlank(data.tag) && tool.isBlank(data.xpath)) {
            tool.toast.warning('步骤验证错误', '请填写选择元素方式', 'topCenter')
            return false
        }
        if (tool.isNotBlank(data.className) || tool.isNotBlank(data.name) || tool.isNotBlank(data.tag)) {
            if (tool.isBlank(data.index)) {
                data.index = null
                // tool.toast.warning('步骤验证错误', '请填写元素组index', 'topCenter')
                // return false
            }
        }
        return true
    }

    function getIndex() {
        return index
    }

</script>
</html>